import localStore from '@Components/assets/js/utils/localStore'

/* eslint-disable no-useless-escape */
export default Vue => {
  Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted(el) {
      // 聚焦元素
      let element = null
      if (el.focus) {
        element = el
      } else {
        element = el.querySelector('input')
      }
      return element && element.focus()
    }
  })
  // elementUI select组件的下拉加载
  // v-el-select-loadmore="loadFunc"
  Vue.directive('el-select-loadmore', {
    bind(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      )
      if (binding.value === undefined) return
      SELECTWRAP_DOM.addEventListener('scroll', function () {
        /**
         * scrollHeight 获取元素内容高度
         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
         * clientHeight 读取元素的可见高度
         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
         */
        const condition =
          this.scrollHeight - this.scrollTop <= this.clientHeight
        if (condition) {
          binding.value()
        }
      })
    }
  })

  Vue.directive('drag-dialog', {
    bind(el) {
      const getAttr = (obj, key) =>
        obj.currentStyle
          ? obj.currentStyle[key]
          : window.getComputedStyle(obj, false)[key]

      const target = el.querySelector('.el-dialog')
      const header = el.querySelector('.el-dialog__header')
      // 鼠标手型
      header.style.cursor = 'move'
      header.onmousedown = e => {
        // 记录按下时鼠标的坐标和目标元素的 left、top 值
        const currentX = e.clientX
        const currentY = e.clientY
        const left = parseInt(getAttr(target, 'left'))
        const top = parseInt(getAttr(target, 'top'))

        const minLeft = target.offsetLeft + target.offsetWidth - 100

        const maxLeft =
          parseInt(getAttr(document.body, 'width')) - target.offsetLeft - 100
        const minTop = target.offsetTop
        const _maxTop =
          parseInt(getAttr(document.body, 'height')) -
          target.offsetTop -
          parseInt(getAttr(header, 'height')) -
          28

        // 防止浏览器窗口过小，maxTop为负数的情况
        const maxTop = _maxTop < 0 ? 0 : _maxTop

        document.onmousemove = event => {
          // 鼠标移动时计算每次移动的距离，并改变拖拽元素的定位
          const disX = event.clientX - currentX
          const disY = event.clientY - currentY
          // 判断左、右边界
          if (disX < 0 && disX <= -minLeft) {
            target.style.left = `${left - minLeft}px`
          } else if (disX > 0 && disX >= maxLeft) {
            target.style.left = `${left + maxLeft}px`
          } else {
            target.style.left = `${left + disX}px`
          }

          // 判断上、下边界
          if (disY < 0 && disY <= -minTop) {
            target.style.top = `${top - minTop}px`
          } else if (disY > 0 && disY >= maxTop) {
            target.style.top = `${top + maxTop}px`
          } else {
            target.style.top = `${top + disY}px`
          }
          return false
        }

        // 鼠标松开时，拖拽结束
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
    // 最后卸载时，清除事件绑定
    unbind(el) {
      const header = el.querySelector('.el-dialog__header')
      header.onmousedown = null
    }
  })

  Vue.directive('column-editstatus', {
    bind(el) {
      const _input = el.querySelector('input')
      el.classList.add('edit-cell')
      if (_input) _input.classList.add('edit-cell')
    }
  })

  Vue.directive('onActive', {
    bind(el, binding) {
      el.addEventListener('click', function (e) {
        if (e.target.tagName == el.tagName) {
          return
        }
        this.children.forEach(item => {
          item.classList.remove(binding.value)
        })
        e.target.classList.add(binding.value)
      })
    }
  })

  Vue.directive('has', {
    inserted(e, { value: permissionName }) {
      if (!permissionName) return
      const unAuths = localStore.getUserPermission()
      let bool = false
      // 添加数组支持
      if (Array.isArray(permissionName)) {
        bool = unAuths.find(i => permissionName.includes(i))
      } else {
        bool = unAuths.find(i => i === permissionName)
      }
      if (bool) {
        e.remove()
      }
    }
  })

  Vue.directive('refContextmenu', {
    inserted(el, binding, vnode) {
      const node = binding?.value
      if (typeof node.addRef !== "function") {
        console.error(`对应的实例不是 VContextmenu`);
        return;
      }
      const contextmenu = Object.prototype.toString.call(node) === '[object Array]' ? node[0] : node
      contextmenu.addRef({ el, vnode })
      contextmenu.$contextmenuId = el.id || contextmenu._uid // eslint-disable-line no-underscore-dangle
    },
  })
}
